<!--
<template>

    <div class="dashboard-editor-container" style="padding:16px;">
      <el-card class="box-card">
        <FullCalendar ref="calendarRef"  :options="calendarOptions" />

      </el-card>
  </div>
</template>

<script>

import FullCalendar from '@fullcalendar/vue';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';



export default {
  //import引入的组件需要注入到对象中才能使用
  components: {FullCalendar},


  data () {
    return {
      //日历配置
      calendarOptions: {
        plugins: [dayGridPlugin, interactionPlugin],
        initialView: 'dayGridMonth',
        locale: 'zh-cn', //? 配置中文
        selectable: false,//可编辑
        editable: true,//可拖拽
        height: 'auto',
        title: '月度计划配置',
        firstDay: 1,
        buttonText: {today: "今天", month: "月", week: "周", day: "日"},
        eventDrop: this.eventDrop, // ?拖拽事件
        // 头部按钮布局展示设置
        headerToolbar: {
          left: "title",
          center: '',
          right: 'prev today next',
        },
        events: this.monthData,   //展示日历里面的数据
        dateClick: this.handleDateClick, // 点击某一天 // 想要触发dateClick事件必须先安装引用interaction插件
        eventClick: this.eventClick,
        eventDidMount: this.eventDidMount,
        eventWillUnmount: this.eventWillUnmount,
        eventResizeStop: this.eventResizeStop,
        viewDidMount: this.viewDidMount,
        //自定义 hander 头部 按钮
        customButtons: {
          YearOrMonth: {
            text: '自定义按钮1',
          },
          prevOrMonth: {
            text: '上一月',
            click: function () {
              alert('点击了自定义按钮!');
            }
          }
        },
      },
      monthData: [
        {
          title : '黄娇变电站3020开关综合检修',
          start : '2021-01-18 02:30',
          end : '2021-01-18 03:30',
          color:'#797979',
          editable: true
        },//可以拖动但不能缩放，但在周、日视图中是可以进行缩放的
        {
          title : '黄娇变电站3020开关综合检修',
          start : '2021-01-19 00:30',
          end : '2021-01-19 04:30',
          color:'#5580EE',
          editable: true
        }, //可以拖动、缩放
        {
          title : '准备公司资料',
          start : '2021-01-21 04:00',
          end : '2021-01-21 07:00',
          color: '#EDB378',
          editable: true,
          // overlap: true,
          // display: 'background',
        },
        {
          title : '准备公司资料',
          start: '2021-01-23 04:00',
          end: '2021-01-23 05:00',
          overlap: false,
          // display: 'background',
          color: '#797979'
        },//背景色 (添加相同时间的背景色时颜色会重叠) 一点要初始化日期时间 initialDate: '2020-07-10'

      ],
    }
  },

    mounted () {

    this.monthPlan = new Date(),
      this.calendarApi = this.$refs.calendarRef.getApi()
    this.calendarApi.gotoDate(new Date) //跳转日期，
    this.$nextTick(() => {
      const prevBtn = document.querySelector('.fc-prev-button')
      prevBtn.addEventListener('click', () => {
        this.changeMonth()
      })
      const nextBtn = document.querySelector('.fc-next-button')
      nextBtn.addEventListener('click', () => {
        this.changeMonth()
      })
      const todayBtn = document.querySelector('.fc-today-button')
      todayBtn.addEventListener('click', () => {
        //渲染当月的里程
        this.getMonthMileFn()
      })
    })
  },
  methods: {
    eventDrop (event) {
      //   console.log("拖拽事假,", event);
      if (this.nextMonth <= new Date().getTime(event.oldEvent._instance.range.start)) {
        event.revert(); //恢复原状
        this.$message.warning("不可操作!")
        return
      }
    },
    eventClick (event, el, jsEvent, view) {
      // 点击某个事件
      //   console.log(event);
    },

    getMonthMileFn () {
      //点击今天按钮 触发的事件
    },

    //监听日历，月份切换
    changeMonth () {
      console.log("月份已切换!");
      const text = document.querySelector('.fc-toolbar-title').innerText
      const year = text.substring(0, 4)
      let month = text.substring(5, 7)
      month = isNaN(month) ? text.substring(5, 6) : month
      //   const date = new Date(`${year}-${month}`)
      //   console.log(date);
      const dateStr = new Date(`${year}-${month}`)
    },

    // 上一年点击
    prevYearCustomClick () {
      console.log("你悄悄的点击了我!");
    },


    // 切换到上一页
    prevFn () {
      const calendarApi = this.$refs.calendarRef.getApi()
      calendarApi.prev()
    },
    // 切换到下一页
    nextFn () {
      const calendarApi = this.$refs.calendarRef.getApi()
      calendarApi.next()
    },
    // 切换到今天
    todayFn () {
      const calendarApi = this.$refs.calendarRef.getApi()
      calendarApi.today()
    },
    // 获取当前描述
    getCurrentTitle () {

    },
    // 切换显示类型
    changeViewTypeFn (type) {
      const calendarApi = this.$refs.calendarRef.getApi()
      calendarApi.changeView(type) // , '2020-11-05'
    },



    // 事件被渲染
    eventDidMount (info) {
      //   console.log(info)
      console.log('事件被渲染');
      document.querySelector('.fc-prev-button').innerText = '上个月'
      document.querySelector('.fc-next-button').innerText = '下个月'

    },
    eventWillUnmount (info) {
      //   console.log(info)
      console.log("这是什么事件?");
    },
    // 新增事件后回调
    afterEventAdd () {
      console.log('afterEventAdd')
    },
    // 点击某一天
    handleDateClick: function (arg) {
      console.log('date click! ' + arg.dateStr)
    },
    eventResizeStop (event) {
      console.log('回调函数，当日程事件调整（resize）结束的时候触发');
    },
    viewDidMount (info) {
      console.log('日历组件渲染结束的时候触发');
    },
  }







}
</script>
<style lang="scss" scoped>

.dashboard-editor-container {

  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
    padding-left: 30px;
  }

  .el-tabs .el-tabs__content {
    max-height: 100px;
    overflow: auto;
  }

}


</style>
-->



<!-- 日历插件   npm安装
npm install --save @fullcalendar/vue
下面包是日历的周视图、日视图等插件包：
npm install --save @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction @fullcalendar/list @fullcalendar/timegrid
日期插件处理库
npm install moment
-->
<template>

  <div class="dashboard-editor-container" style="padding:16px;">
    <el-card class="box-card" >

      <el-row :gutter="20">
        <el-col :span="10" :offset="3">

  <FullCalendar ref="calendarRef"  :options="calendarOptions" />
        </el-col>
        <el-col :span="10" >
        <el-row class = "main">

          <el-button type="primary" @click="handleAdd">新增</el-button>

<!--          <el-collapse v-model="activeName" accordion>
            <el-collapse-item title="一致性 Consistency" name="1">
              <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
              <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
            </el-collapse-item>
            <el-collapse-item title="反馈 Feedback" name="2">
              <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
              <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
            </el-collapse-item>
            <el-collapse-item title="效率 Efficiency" name="3">
              <div>简化流程：设计简洁直观的操作流程；</div>
              <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
              <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
            </el-collapse-item>
            <el-collapse-item title="可控 Controllability" name="4">
              <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
              <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
            </el-collapse-item>
          </el-collapse>-->
          <el-tabs type="border-card" style = "margin-top:30px;"  >
            <el-tab-pane style="height: 425px">
              <span slot="label"><i class="el-icon-date"></i> 我的日程</span>


<!--              <el-collapse v-model="activeName" accordion>

                <div>
                  <div  v-for="(item,index) in List" >
                <el-collapse-item :title="item.scheduleTitle" :name = "index">

                  <p  v-html="item.scheduleContent"></p>
                </el-collapse-item>
                  </div>



                  </div>


              </el-collapse>-->



<!--                <el-form :model="queryParams" ref="queryForm" size="small" :inline="true"  label-width="80px" style="margin-top: 10px" v-show="showSearch">
                  <el-form-item label="日程标题" prop="noticeTitle">
                    <el-input
                      v-model="queryParams.scheduleTitle"
                      placeholder="请输入公告标题"
                      clearable
                      @keyup.enter.native="handleQuery"
                    />
                  </el-form-item>




                  <div style="text-align: right;">
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                  </div>
                  <br/>
                </el-form>-->
              <el-scrollbar style = "height: 100%">
              <el-table v-loading="loading" :data="List" style="margin-top: 20px;margin-top: -10px;"  :show-header="false" >


                <el-table-column label="日程列表" fixed="left" prop="noticeTitle" width="100">
                  <template slot-scope="scope">
                    <div   style="cursor: pointer;">
                      {{scope.row.scheduleTitle}}
                    </div>
                  </template>



                </el-table-column>

                <el-table-column
                  prop="scheduleContent"
                  fixed="left"

                  show-overflow-tooltip >
                  <template slot-scope="scope">
                    <p  v-html="scope.row.scheduleContent"></p>
                  </template>
                </el-table-column>

                <el-table-column
                  prop="createTime"
                  fixed="right"
                  width="100px">
                  <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
                  </template>
                </el-table-column>

              </el-table>





<!--              <pagination
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
              />-->
              </el-scrollbar>


            </el-tab-pane>




            <el-tab-pane label="共享日程" style="height: 425px">



              <el-scrollbar style = "height: 100%">
              <el-table v-loading="loading" :data="contentList" style="margin-top: 20px;margin-top: -10px" :show-header="false" >

                <el-table-column label="共享日程列表" fixed="left" prop="noticeTitle" width="100">
                  <template slot-scope="scope">
                    <div  @click="getLista(scope.row)"  style="cursor: pointer;">
                      {{scope.row.scheduleTitle}}
                    </div>
                  </template>



                </el-table-column>

                <el-table-column
                  prop="scheduleContent"
                  fixed="left"

                  show-overflow-tooltip >
                  <template slot-scope="scope">
                    <p  v-html="scope.row.scheduleContent"></p>
                  </template>
                </el-table-column>

                <el-table-column
                  prop="createTime"
                  fixed="right"
                  width="100px">
                  <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
                  </template>
                </el-table-column>
              </el-table>
<!--              <pagination
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getListShare"

              />-->

              </el-scrollbar>
            </el-tab-pane>
          </el-tabs>



        </el-row>
        </el-col>

      </el-row>
      <el-dialog title="日程详细" :visible.sync="dialogTableVisible">

      </el-dialog>

      <!-- 添加或修改日程管理 - 对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="650px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="日程标题" prop="scheduleTitle">
            <el-input v-model="form.scheduleTitle" placeholder="请输入日程标题" />
          </el-form-item>


          <el-col :span="12">
            <el-form-item label="开始时间" prop="startTime">
              <el-date-picker clearable size="small" style="width: 220px"

                              v-model.trim="form.startTime"
                              type="datetime"
                              popper-class="no-atTheMoment"
                              value-format="yyyy-MM-dd HH:mm:ss"
                              placeholder="选择开始时间"
                              :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间" prop="endTime">
              <el-date-picker clearable size="small" style="width: 220px"
                              v-model="form.endTime"
                              type="datetime"
                              popper-class="no-atTheMoment"
                              value-format="yyyy-MM-dd HH:mm:ss"
                              placeholder="选择结束时间"
                              :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="24" v-if="form.isPublic == '1'" >
            <el-form-item label="是否公开" prop="isPublic">
              <el-radio-group v-model="form.isPublic" @change = "changePublic">
                <el-radio label="1" >否</el-radio>
                <el-radio label="2">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12"  v-if="form.isPublic == '2'">
            <el-form-item label="是否公开" prop="isPublic">
              <el-radio-group v-model="form.isPublic" @change = "changePublic">
                <el-radio label="1" >否</el-radio>
                <el-radio label="2">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

<!--          <el-col :span="12" v-if="form.isPublic == '1'">
            <el-form-item label="1" prop="visibleRange">
            </el-form-item>
          </el-col>-->


          <el-col :span="12" v-if="form.isPublic == '2'">
            <el-form-item label="可见范围" prop="visibleRange">

              <el-select v-model="form.visibleRange" multiple placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>

            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="日程内容">
              <editor v-model="form.scheduleContent" :min-height="192"/>
            </el-form-item>
          </el-col>
          <!--          <el-form-item label="类型" prop="lx">
                      <el-select v-model="form.lx" placeholder="请选择类型" clearable :style="{ width: '200px' }">
                        <el-option
                          v-for="dict in jjrlxOptions"
                          :key="dict.dictValue"
                          :label="dict.dictLabel"
                          :value="dict.dictValue"
                        />
                      </el-select>
                    </el-form-item>-->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
          <el-button v-if="title == '编辑日程'" @click="deleteForm" :style="{ background: 'red',color:'white'}">删除</el-button>
        </div>
      </el-dialog>


    </el-card>
  </div>
</template>


<script>
import moment from 'moment';
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
import timeGridPlugin from '@fullcalendar/timegrid'
import {listCalendar,getCalendar,addCalendar,updateCalendar,delCalendar,listShareCalendar} from "@/api/module/xjy/calendar";
import {addNotice, updateNotice} from "@/api/system/notice";
import { listUser } from "@/api/system/user";
import {listNotice} from "@/api/module/xjy/notice";

export default {
  components: {
    FullCalendar  // 像使用自定义组件一样使用
  },


  data() {
    return {

      // 显示搜索条件
      showSearch: true,
      activeName:"1",
      //右侧链表显示数据
      List:[],
      // 遮罩层
      loading: true,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      // 是否公开spand的大小
      size: 24,
      options: [],
      contentList:[],
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderByColumn:"createTime",
        isAsc:"desc",
        scheduleTitle:undefined,
      },
      dialogTableVisible:false,

      // 表单校验
      rules: {
        //日程标题
        scheduleTitle: [
          {required: true, message: "日程标题不能为空", trigger: "blur"},
          {min: 1, max: 10, message: '日程标题长度必须介于 1 和 10 之间', trigger: 'blur'}
        ],
        //开始时间
        startTime: [
          {required: true, message: "开始时间不能为空", trigger: "blur"},
        ],
        //结束时间
        endTime: [
          {required: true, message: "结束时间不能为空", trigger: "blur"},
        ]
      },
      //只能选择几天及以后的日期
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;

        },

      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        },
        selectableRange: "00:00:00 - 23:59:59",
      },

      //日历内容
      calendarApi: null,
      calendarOptions: {
        plugins: [ dayGridPlugin, interactionPlugin ], // 需要用哪个插件引入后放到这个数组里
        initialDate: new Date(), // 日历第一次加载时显示的初始日期。可以解析为Date的任何职包括ISO8601日期字符串，例如"2014-02-01"。
        initialView: 'dayGridMonth', // 日历加载时的初始视图，默认值为'dayGridMonth'，可以为任何可用视图的值，如例如'dayGridWeek'，'timeGridDay'，'listWeek'
        locale: 'zh-cn', // 设置日历的语言，中文为 “zh-cn”
        firstDay: '1', // 设置每周的第一天，默认值取决于当前语言环境，该值为代表星期几的数字，且值必须为整数，星期日=0
        weekNumberCalculation: 'ISO', // 指定"ISO"结果为ISO8601周数。指定"ISO"将firstDay的默认值更改为1（Monday）
        buttonText: { // 文本将显示在headerToolbar / footerToolbar的按钮上。不支持HTML注入。所有特殊字符将被转义。
          today: '今天',
          month: '月',
          week: '周',
          day: '天'
        },
        headerToolbar: { // 在日历顶部定义按钮和标题。将headerToolbar选项设置为false不会显示任何标题工具栏。可以为对象提供属性start/center/end或left/center/right。这些属性包含带有逗号/空格分隔值的字符串。用逗号分隔的值将相邻显示。用空格分隔的值之间会显示一个很小的间隙。
          right: 'today prev,next',
          center: 'title',
          left: 'dayGridMonth,dayGridWeek'

        },
        eventTimeFormat: { // 在每个事件上显示的时间的格式
          hour: 'numeric',
          minute: '2-digit',
          hour12: false
        },
       /* events: [ // 将在日历上显示的事件对象， events 可以是数组、json、函数。具体可以查看官方文档
          {   title : '测试测试测试',
            start : '2022-08-08',
            end : '2022-08-9',

      borderColor: '#FDEBC9', // 该事件的边框颜色
      //textColor: '#F9AE26' ,// 该事件的文字颜色
          },
          {   title : '测试测试测试',
            start : '2022-08-08 02:30',
            end : '2022-08-12 03:30',
            color:'#797979',
            borderColor: '#FDEBC9', // 该事件的边框颜色
            //textColor: '#F9AE26' ,// 该事件的文字颜色
          },
          {   title : '测试测试测试',
            start : '2022-08-08 02:30',
            end : '2022-08-12 03:30',
            color:'#797979',
            borderColor: '#FDEBC9', // 该事件的边框颜色
            //textColor: '#F9AE26' ,// 该事件的文字颜色
          }],*/
        events:[],
    customButtons: { // 定义可在headerToolbar / footerToolbar中使用的自定义按钮
      today: {
        text: '今天', // 按钮的展示文本
          click: this.todayClick // 点击按钮触发的事件，这里要注意的是当按钮绑定了事件之后该按钮原本自带的事件将会失效
      },
      next: {
        click: this.nextClick
      },
      prev: {
        click: this.prevClick
      }
    },
    eventClick: this.eventClick, // 点击事件时，触发该回调
      eventMouseEnter: this.handleMouseEnter, // 鼠标悬停在事件上时，触发该回调
      eventMouseLeave: this.handleMouseLeave, // 鼠标移除时，触发该回调
    dateClick:this.handleDateClick // 当用户单击日期或时间时,触发该回调，触发此回调，您必须加载interaction插件
  }
  }
  },

  created() {
    this.getList();
    this.getUser();
    this.getListShare();

  },

  watch: {
    "form.startTime": {
      handler(newValue, oldValue) {
        if (newValue) {
          let date = new Date();
          let min = date.getMinutes();
          date.setMinutes(min + 1); //这里加1分钟，是为了解决值改变后，系统秒数就过期限制了，无法点击“此刻”按钮， 如果监听 “系统时间”的改变，则会影响性能。
          let nowDate = moment(date).format("HH:mm:ss");
          let st = "";
          if (moment(date).format("yyyy-MM-DD") === moment(newValue).format("yyyy-MM-DD")) {
            let hh1 = moment(newValue).format("HH:mm:ss")
            if(hh1 > nowDate) {
              this.form.startTime = new Date();
            }
            st = nowDate;
          } else {
            st = "23:59:59";
          }
          this.pickerOptions.selectableRange = "00:00:00 - " + st;
          this.pickerOptions = this.pickerOptions;
        }
      },
      deep: true,
      immediate: true,
    },
    "form.endTime": {
      handler(newValue, oldValue) {
        if (newValue) {
          let date = new Date();
          let min = date.getMinutes();
          date.setMinutes(min + 1); //这里加1分钟，是为了解决值改变后，系统秒数就过期限制了，无法点击“此刻”按钮， 如果监听 “系统时间”的改变，则会影响性能。
          let nowDate = moment(date).format("HH:mm:ss");
          let st = "";
          if (moment(date).format("yyyy-MM-DD") === moment(newValue).format("yyyy-MM-DD")) {
            let hh1 = moment(newValue).format("HH:mm:ss")
            if(hh1 > nowDate) {
              this.form.endTime = new Date();
            }
            st = nowDate;
          } else {
            st = "23:59:59";
          }
          this.pickerOptions.selectableRange = "00:00:00 - " + st;
          this.pickerOptions = this.pickerOptions;
        }
      },
      deep: true,
      immediate: true,
    },




  },




  mounted() {
    // 这里有两点要注意，想要调用插件的方法，要在组件上设置ref
    // 并且在组件未加载的时候this.$refs中是没有fullCalendar的，所以未加载的时候调用方法会报错
    this.calendarApi = this.$refs.fullCalendar.getApi()
  },

  methods: {




    //点击事件：修改日程
    eventClick (event, el, jsEvent, view) {
      // 获取事件的名称
        console.log(event.event.title);
      this.reset();
      //获取事件的id
      const id = event.event.id
      getCalendar(id).then(response => {
        this.form = response.data;

        let dataIntArr=[];
        //多级选择器回显 ,先转换成String类型的数组，再转换成整型
        let data = response.data.visibleRange
        //如果不为空，则进行处理
        if(data !=null){
          let  arr = data.split(',');
          arr.forEach(item => {
            dataIntArr.push(+item);
          })
          this.form.visibleRange = dataIntArr

        }

        this.open = true;
        this.title = "编辑日程";
        //console.log(this.form.startTime)
      })
    },

    handleDateClick(dateClickInfo) {
      console.log("点击事件")
      console.log(dateClickInfo)
    },
    handleMouseEnter(mouseEnterInfo) {
      console.log(mouseEnterInfo.event.startStr)
      // 提示：mouseEnterInfo.event.startStr 可以获取当前事件的开始事件
    },
    handleMouseLeave(mouseEnterInfo) {
      console.log(mouseEnterInfo)
    },
    todayClick(mouseEvent, htmlElement) {
      const calendarApi = this.$refs.calendarRef.getApi()
      calendarApi.today()
    },
    nextClick(mouseEvent, htmlElement) {
      // 如果dayGridMonth查看日历，则将日历向前移动一个月。
      // 如果日历位于dayGridWeek或中timeGridWeek，则将日历向前移动一周。
      // 如果日历位于dayGridDay或中timeGridDay，则将日历向前移动一天。
      const calendarApi = this.$refs.calendarRef.getApi()
      calendarApi.next()
    },
    prevClick(mouseEvent, htmlElement) {
      const calendarApi = this.$refs.calendarRef.getApi()
      calendarApi.prev()
      //calendarApi.prev() // 将日历后退一步（例如，一个月或一周）。
      // 如果dayGridMonth查看日历，则将日历后移一个月。
      // 如果日历位于dayGridWeek或中timeGridWeek，则将日历后移一周。
      // 如果日历位于dayGridDay或中timeGridDay，则将日历移回一天。
    },



    /*获取近日行程列表*/
    getList() {

      //console.log(this.$store.state.user)

      listCalendar(this.queryParams).then(response => {
        this.loading = true;
      //后台传来的数据
        let data = response.rows;
        this.List  = response.rows;
        this.total = response.total;
        this.loading = false;
        //重新构造json数组
        for (let i = 0; i < data.length; i++) {
          //未完成
        /*  if(data[i].note1 == '1'){
         this.calendarOptions.events.push({
            id:data[i].id,
            title:data[i].scheduleTitle,
            start:data[i].startTime,
            end:data[i].endTime,
           color:'#fbd41a',
           borderColor: '#FDEBC9', // 该事件的边框颜色
          })

        }else if(data[i].note1 == '2'){
            //已完成
            this.calendarOptions.events.push({
              id:data[i].id,
              title:data[i].scheduleTitle,
              start:data[i].startTime,
              end:data[i].endTime,
              borderColor: '#FDEBC9', // 该事件的边框颜色
            })
          }*/
          //已完成
          this.calendarOptions.events.push({
            id:data[i].id,
            title:data[i].scheduleTitle,
            start:data[i].startTime,
            end:data[i].endTime,
            borderColor: '#FDEBC9', // 该事件的边框颜色
          })
        }
      })
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
      this.size = 12
    },
    // 表单重置
    reset() {
      this.form = {
        userId: undefined,
        deptId: undefined,
        username: undefined,
        //日期类型
        calendarType: undefined,
        //是否显示
        isPublic: "1",
        //日程标题
        scheduleTitle: undefined,
        //日程内容
        scheduleContent: undefined,
        //开始时间
        startTime: undefined,
        //可见范围
        visibleRange: undefined,
        //结束时间
        endTime: undefined,
      };
      this.resetForm("form");
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加日程";
    },
    changePublic(val){
      if(val=="1"){

        //清空
        this.form.visibleRange = null
      }if(val =="2"){

      }

    },
    //下拉列表获取所有用户信息
    getUser() {
      listUser().then(response => {
        let data = response.rows;
          for (let i = 0; i < data.length; i++) {

          this.options.push({

              value:data[i].userId,
              label:data[i].nickName,

            })

          }

      });
    },

    /** 提交按钮 */
    submitForm: function () {

      this.$refs["form"].validate(valid => {

        if (valid) {
          if (this.form.id != undefined) {
            //后台接收的数据是string类型，前台传值需要把数组类型的数据转换成string类型
            if(this.form.visibleRange!= undefined){
              this.form.visibleRange = this.form.visibleRange.toString()
            }

          /*  this.form.visibleRange = []
            /!*console.log(JSON.parse(this.form.visibleRange))*!/
            for (var i = 0; i < this.form.note10.length; i++) {

              this.form.visibleRange.push(this.form.note10[i])

            }
            console.log( this.form.visibleRange)*/


            updateCalendar(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              //将原来的数据清除
              this.calendarOptions.events  =[]
              this.getList();
            });
          }else {
            //后台接收的数据是string类型，前台传值需要把数组类型的数据转换成string类型
            if(this.form.visibleRange!= undefined){
              this.form.visibleRange = this.form.visibleRange.toString()
            }
            addCalendar(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.calendarOptions.events  =[]
              this.getList();
            });
          }
        }
      });
    },

    /** 查询共享日程列表 */
    getListShare() {
      this.loading = true;
      listShareCalendar(this.queryParams).then(response => {

        this.contentList = response.rows;

        this.total = response.total;
        this.loading = false;
      });
    },


    /** 删除操作 */
    deleteForm() {
      let ids = [];
      const scheduleTitle = this.form.scheduleTitle
      ids.push(this.form.id)

      this.$modal.confirm('是否确认删除日程标题为"' + scheduleTitle + '"的数据项？').then(function() {
        return delCalendar(ids);
      }).then(() => {
        //将原来的数据清除
        this.calendarOptions.events  =[]
        this.getList();
        this.$modal.msgSuccess("删除成功");
        this.open = false;
      }).catch(() => {});
    }


  }
}
</script>

<style lang="scss" scoped>

.dashboard-editor-container {

  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
    padding-left: 30px;
  }

  .el-tabs .el-tabs__content {
    max-height: 100px;
    overflow: auto;
  }

}


::v-deep.full-calendar-body .dates .dates-events .events-week .events-day{
  min-height:100px !important;
}
::v-deep.future-class{
  background-color:#0092ff !important;
  color:#ffffff !important;
}
::v-deep.did-class{
  background-color:#13ce66 !important;
  color:#ffffff !important;
}
::v-deep.giveup-class{
  background-color:#c0c4cc !important;
  color:#ffffff !important;
}
::v-deep.stop-class{
  background-color:#e64242 !important;
  color:#ffffff !important;
}

::v-deep .el-scrollbar__wrap {
  overflow-x: hidden!important;


}

</style>


<style>
.el-picker-panel__footer .el-picker-panel__link-btn.el-button--text {
  display: none;
}
/*日期组件绝对定位*/
.main{
  position: relative;

}



</style>
